<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-在组件中定义组件自己的数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <welcome date="2021年7月22日"></welcome>
</div>
<script>
    var welcome = {
        template:"<div>" +
            "<h2>" +
            "{{name}},欢迎你,今天是{{date}},你正在学习" +
            "<ul><li v-for='(item,index) in list'>{{index+1}} {{item}}</li></ul>"+
            "</h2>" +
            "</div>",
        data(){ //定义组建中自己的data数据，这里的数据与Vue对象中的data无关
            return{
                name:'张三李四王五',
                list:['java','springboot','vue']
            };
        },
        props:['date']
    }

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components:{
            welcome
        }
    });
</script>
</body>
</html>